<template>
  <v-card class="pa-8 " color="blue-grey darken-1"  dark :loading="isUpdating">
    <template v-slot:progress>
      <v-progress-linear
        absolute
        color="green lighten-3"
        height="4"
        indeterminate
      ></v-progress-linear>
    </template>
    <v-img
      height="200"
      src="https://cdn.vuetifyjs.com/images/cards/dark-beach.jpg"
    >
      <v-row>
        <v-col class="text-right" cols="12">
          <v-menu bottom left transition="slide-y-transition">
            <template v-slot:activator="{ on, attrs }">
              <v-btn icon v-bind="attrs" v-on="on">
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </template>
            <v-list>
              <v-list-item :href='cms' text>
                <!-- <v-list-item-action>
                  <v-icon>mdi-login</v-icon>
                </v-list-item-action> -->
                <v-list-item-content>
                  <v-list-item-title>登录</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-col>
      </v-row>
    </v-img>
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="phone"
              :disabled="isUpdating"
              filled
              color="blue-grey lighten-2"
              label="账号"
            ></v-text-field>
          </v-col>
          <v-col cols="12" md="6">
            <v-text-field
              v-model="password"
              :disabled="isUpdating"
              filled
              color="blue-grey lighten-2"
              label="密码"
            ></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
    <v-divider></v-divider>
    <v-card-actions>
      <v-switch
        v-model="autoUpdate"
        :disabled="isUpdating"
        class="mt-0"
        color="green lighten-2"
        hide-details
        label="Auto Update"
        v-if="false"
      ></v-switch>
      <v-spacer></v-spacer>
      <v-btn
        :disabled="autoUpdate"
        :loading="isUpdating"
        color="blue-grey darken-3"
        depressed
        @click="isUpdating = true"
      >
        <v-icon left> mdi-update </v-icon>
        登录
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      autoUpdate: false,
      isUpdating: false,
      phone: "",
      password: "",
    };
  },
  created(){
    this.cms = this.$Global.cms;
  },

  watch: {
    isUpdating(val) {
      if (val) {
        console.log(this.phone, this.password);
        if(this.phone&&this.password){
            this.login();
        }
        //登录请求
        setTimeout(() => (this.isUpdating = false), 3000);
      }
    },
  },

  methods: {
    login() {
      var url = this.$Global.api;
      var requireData = {phone:this.phone,password:this.password,method:'login'};
      this.$axios
        .post(url, requireData)
        .then((res) => {
          console.log("推送消息", res);
          if(res.data.length>0){
              //赋值
              //this.$Global.phone = res.data[0].phone;
              localStorage.setItem('login',JSON.stringify(res.data[0]));
              //跳转页面
              setTimeout(() => (this.$router.push('/')), 1000);
          }else{alert("账号或密码有误，请重新输入");}
          //this.account = res.data[0];
          //alert("发送成功");
        })
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
  },
};
</script>